<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册界面</title>
  <link rel="stylesheet" th:href="@{/css/zhuce.css}"/>
  <style>
    #inputCaptcha {
      height: 35px;
      width: 110px;
      vertical-align: middle;
    }
    #verificationCodeImg{
      vertical-align: middle;
    }
  </style>
</head>
<body class="herd" style="margin-top: 100px">
<div class="container">
  <h1>新用户注册</h1>
  <div th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" style="color:red; margin-left: 130px">用户名错 误！</div>
  <form id="zczhmm" th:action="@{/zczm}" th:method="post">
    <br>
    <span class="p">*</span>
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" placeholder="" class="register"><br><br>
    <span class="q">*</span>
    <label for="pwd">登录密码</label>
    <input type="password" name="pwd" id="pwd" class="register"><br><br>
    <span class="q">*</span>
    <label for="c_pwd">确认密码</label>
    <input type="password" name="c_pwd" id="c_pwd" class="register"><br><br>
    <span class="p">*</span>
    <label for="inputCaptcha">验证码</label>
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="http://127.0.0.1:8080/admin/captcha" style="cursor: pointer;" title="看不清？换一张" /><br><br>
    <input  id="checkCaptcha" type="submit" name="" value="确认注册" class="submit" onclick="$('#zczhmm').submit()"><br>
    <a href="index.html" class="left">返回首页</a>
  </form>
</div>
<script src="/js/jquery.js"></script>
<script>
  $("#verificationCodeImg").click(function(){
    // 当点击验证码图片时，隐藏当前图片，更新其src属性以获取新的验证码图片，然后淡入显示
    // 通过在URL中添加时间戳来确保每次请求都是唯一的，避免浏览器缓存导致验证码不更新
    $(this).hide().attr('src', 'admin/captcha?dt=' + new Date().getTime()).fadeIn();
  });

  $("#checkCaptcha").click(function () {
    $.post({
      // url: "/login?inputCaptcha="+ $("#inputCaptcha").val()+$("#us"),
      url: "/zczm?inputCaptcha=" + encodeURIComponent($("#inputCaptcha").val()) + "&us=" + encodeURIComponent($("#us").val())
    });
  });

</script>
<!--<script>-->
<!--  var checkbox=document.getElementsByClassName('checkbox');-->
<!--  function register(btn){-->
<!--    if(checkbox[0].checked==true){-->
<!--      alert("注册成功！");-->
<!--    }-->
<!--    else{-->
<!--      alert("请先阅读并同意《用户注册协议》！")-->
<!--    }-->
<!--  }-->
<!--</script>-->
</body>
</html>
